<template>
  <div class=''>
    <h3 class="pb-3 mb-4 border-bottom">文章列表</h3>
    <div class="blog-post" v-for="(item, index) in model.rows" :key="index">
      <h4 class="blog-post-title" style="cursor: pointer;" 
        @click="$router.push({name: 'article-id', params: {id: item.id}})">
        {{ index }} - {{item.title}}
      </h4>
      <p class="blog-post-meta">
        {{ $formatDateTime(item.updateDate) }}
        <span class="ml-5">分类：</span>
        <a href="javascript:;">{{item.mark || '暂无分类'}}</a></p>
      <p>{{item.abstract}}</p>
      <hr>
    </div>
    <!-- <el-pagination background layout="prev, pager, next" :total="1000" class="text-center mb-5">
    </el-pagination> -->
  </div>
</template>
<script>
import api from '@/api';
import PagedList from '@/libs/paged-list.js'

export default {
  name: 'blog-list',
  title: '文章列表',
  data() {
    return {
      model: new PagedList(api.article),
      datas: []
    }
  },
  mounted() {
    window.onscroll = this.addLoadListener
  },
  methods: {
    newSearch(type, search) {
      this.model.search({
        title: search,
        type: type,
      })
    },
    addLoadListener(e) {
      const { hasMore, loading } = this.model;
      if (hasMore && !loading) {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        if(scrollHeight > clientHeight && scrollHeight - scrollTop - clientHeight <= 100) {
          this.model.addLoad();
        }
      }
    }
  },
  watch: {
    '$route': {
      handler(val) {
        const { params: { type }, query: {search} } = val
        this.newSearch(type, search)
      },
      immediate: true,
    }
  },
  beforeDestroy() {
    window.onscroll = null
  }
}
</script>
<style lang = 'scss'>
</style>